<template>
    <div class="cons">
        <!-- 上面图片部分 -->
        <div class="logo">
            <img src="~@/assets/logo.png"/>
        </div>
        <!-- 登陆注册 -->
        <van-tabs background="#FFFFFF" title-active-color="#4a90e2" title-inactive-color="#3f3f3f">
            <van-tab title="登录">
                <div slot="default" class="denglu">
                    <van-form @submit="submit">
                        <van-field
                            v-model="username"                             
                            placeholder="帐号" 
                            :rules="user.username"
                            maxlength='11' 
                            class="itos"         
                        >
                        <i slot="left-icon" class="iconfont iconprofile icon"></i>

                        </van-field>
                        <van-field
                            v-model="password"
                            type="password"                          
                            placeholder="密码"
                            maxlength='20'
                            :rules="user.password"
                            class="itos" 
                        >
                         <i slot="left-icon" class="iconfont iconmima icon"></i>
                         </van-field>     
                        <van-button type="primary" block class="deng" native-type="button">注册</van-button>               
                        <van-button type="primary" block class="zhu">登录</van-button>
                        <p class="wangji">忘记密码</p>
                    </van-form>
                </div>
            </van-tab>
            <van-tab title="注册" class="sign">
                <div slot="default">   
                    <div class="inp">
                         <div class="top">
                            <i slot="left-icon" class="iconfont iconprofile icon"></i>
                            <span>账户</span>                      
                        </div>     
                        <input type="text">             
                    </div>  
                     <div class="inp">
                         <div class="top">
                            <i slot="left-icon" class="iconfont iconyouxiang icon"></i>
                            <span>邮箱</span>                      
                        </div>
                        <input type="text">
                    </div>    
                     <div class="inp">
                         <div class="top">
                            <i slot="left-icon" class="iconfont iconmima icon"></i>
                            <span>密码</span>                      
                        </div>
                        <input type="password">
                    </div>     
                     <van-button type="primary" block class="zhu">注册</van-button>  
                       <!-- 底部 -->
                        <van-nav-bar class="qita">      
                            <p slot="title" class="title-qita">其他注册方式</p>
                            <span slot="left" class="left"></span>
                            <span slot="right" class="right"></span>
                        </van-nav-bar> 
                        <div class="other">
                            <img src="~@/assets/weixin.png"/>
                            <img src="~@/assets/qq.png"/>
                            <img src="~@/assets/weibo.png"/>
                        </div>                   
                </div>              
            </van-tab>      
        </van-tabs>
    </div>
</template>
<script>
export default {
  data:function(){
      return {
        username:'',
        password:'',
        user:{
            username: [{
            required: true,
            message: '手机号不能为空'
            }, {
            pattern: /^1[3|5|7|8]\d{9}$/,
            message: '手机号格式错误'
            }],
             password:[{
                required:true,
                message:'密码不能为空'
            }
        ]  
        }
      }
  },
  methods:{
      submit(){
         this.$router.push('/qidong')
      }
  }
}
</script>
<style lang="less">
body{
    background: #ffffff;
}
.cons{
.icon{
    font-size: 30px;
    color: #cbcbcb;
}
.van-form{
    padding-top: 48px;
}
.van-cell::after{
    border-bottom: 7px solid #e2e2e2;
    right: 99px;
    left: 65px;
}
.van-field__left-icon{
    margin-right: 21px;
}
.itos{
    background: #ffffff;
    margin-bottom:25px;
    padding-right: 99px;
    padding-left: 85px;
}
.van-cell{
    // background: #ffffff;
    // margin-bottom:25px;
    // padding-right: 99px;
    // padding-left: 85px;
}
.van-tabs--line .van-tabs__wrap{
    height: 112px;
}
.van-tabs__nav--line{
    height: 112px;
    padding: 0px;
}
.logo img{
    width: 750px;
    height: 360px;
    display: block;
}
.van-tabs__line{
    bottom: 10px;
    width: 224px;
    height: 8px;
    background: #4a90e2;
}
.deng{
    width: 590px;
    height: 80px;
    background: #f7f6f6;
    border: 2px solid #979797;
    border-radius: 40px;
    margin: 0 auto;
    margin-top: 70px;
    margin-bottom: 50px;
    font-size: 30px;
    color: #979797;
    letter-spacing: 2px;
}
.zhu{
    width: 590px;
    height: 80px;
    background: #4a90e2;
    border-radius: 40px;
    margin: 0 auto;
    font-size: 30px;
    color: #ffffff;
    border:none;
    letter-spacing: 2px;
}
.wangji{
    border: none;
    background: none;
    margin-top: 22px;
    font-size: 24px;
    color: #4a90e2;
}
.sign{
    padding-top: 40px;
    .inp:nth-of-type(3){
        margin-bottom:95px;
    }
}
.inp{
    width: 586px;
    margin-left: 65px;
    padding: 21px 33px;
    text-align: left;
    border-bottom: 3px solid #e2e2e2;
    .top{
        height: 40px;
    }
    i{
        font-size: 24px;
        color: #cbcbcb;
    }
    span{
       padding-left: 19px;
       font-size: 18px;
       color: #cbcbcb;
    }
    input{
        padding-left: 44px;
        border: none;
        background: #ffffff;
        height: 28px;
        font-size: 24px;
        color: #585858;
    }
}
.title-qita{
    font-size: 20px;
    color: #999999;
}
 .left{
       width: 66px;
       height: 3px;
       background: #e2e2e2;
}
.right{
       width: 66px;
       height: 3px;
       background: #e2e2e2;
}
.van-nav-bar{
background: none;
}
.van-nav-bar__content{
    width: 286px;
    margin: 0 auto;
}
.van-nav-bar__left, .van-nav-bar__right{
    padding: 0px;
}
.other img{
    width: 48px;
    height: 48px;
}
.van-hairline--bottom::after{
        border-bottom: 0px;
}
.van-nav-bar__content{
        height: 100%;
}
.van-nav-bar{
        line-height: 100%;
}
.other img:nth-of-type(2){
    margin:0px 79px;
}
.qita{
    margin-top: 45px;
    margin-bottom: 19px;
}
}

</style>
